<template>
  <NuxtLayout>
    <div class="mech_box">
      <div class="mech_center_box">
        <div class="mech_left">
          <div class="title">机构入驻</div>
          <img class="bg" src="https://static.dzyxzx.cn/jkbpc/mechanismbg.png" alt="" />
          <img class="lg" src="https://static.dzyxzx.cn/jkbpc/mechanismimg.png" alt="" />
        </div>
        <div class="mech_right">
          <el-result icon="success" v-if="mechStatue === 1">
            <template #extra>
              <div class="text">审核通过</div>
            </template>
          </el-result>
          <el-result icon="info" v-else-if="mechStatue === 0">
            <template #extra>
              <div class="text">审核中...</div>
            </template>
          </el-result>
          <el-result icon="error" v-else-if="mechStatue === 2">
            <template #extra>
              <div class="text">审核驳回，原因：</div>
              <div class="reason">{{ mechReason }}</div>
              <br />
              <el-button type="primary" @click="mechStatue = null">重新填写</el-button>
            </template>
          </el-result>
          <el-form v-else :model="mechForm">
            <el-form-item label="机构全称">
              <el-input v-model="mechForm.allName"></el-input>
            </el-form-item>
            <el-form-item label="机构简称">
              <el-input v-model="mechForm.shortName"></el-input>
            </el-form-item>
            <el-form-item label="机构联系人">
              <el-input v-model="mechForm.contacts"></el-input>
            </el-form-item>
            <el-form-item label="机构电话">
              <el-input v-model="mechForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="机构地址">
              <el-input v-model="mechForm.address"></el-input>
            </el-form-item>
            <el-form-item label="机构邮箱">
              <el-input v-model="mechForm.email"></el-input>
            </el-form-item>
            <el-form-item label="机构简介">
              <el-input v-model="mechForm.shotIntro" type="textarea"></el-input>
            </el-form-item>
            <el-form-item label=" ">
              <el-button type="primary" style="width: 320px; height: 48px" :disabled="subDisabled" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </NuxtLayout>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { useCountStore } from "~/store/counter.js";
import { addInstitutionApi } from "~/server/api.js";
useCountStore().$patch({
  indexActive: 5,
});
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_机构入驻",
  keywords: "技考邦,机构入驻",
  description: "技考邦，机构入驻。",
  ogTitle: "技考邦_机构入驻",
  ogDescription: "技考邦，机构入驻。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
const subDisabled = ref(false)

const mechStatue = ref(null); //审核状态
const mechReason = ref(""); //驳回原因
// 判断机构数据是否存在
const mechanism = useRoute().meta.mechanism;
if (mechanism != null) {
  mechStatue.value = mechanism.auditStatus;
  mechReason.value = mechanism.auditMsg;
}

const mechForm = reactive({
  allName: "",
  shortName: "",
  contacts: "",
  phone: "",
  address: "",
  email: "",
  shotIntro: "",
});
const submitForm = async () => {
  const regPhone = /^[1][3,4,5,7,8,9][0-9]{9}$/;
  const regEmail =
    /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
  if (
    mechForm.allName === "" ||
    mechForm.shortName === "" ||
    mechForm.contacts === "" ||
    mechForm.phone === "" ||
    mechForm.address === "" ||
    mechForm.email === "" ||
    mechForm.shotIntro === ""
  ) {
    ElMessage.error("请填写完整信息");
    return;
  } else if (mechForm.phone.length !== 11 || !regPhone.test(mechForm.phone)) {
    ElMessage.error("请填写正确的手机号");
    return;
  } else if (!regEmail.test(mechForm.email)) {
    ElMessage.error("请填写正确的邮箱");
    return;
  } else {
    subDisabled.value = true;
    await useServerRequest(addInstitutionApi, {
      method: "post",
      body: JSON.stringify({
        fullName: mechForm.allName,
        shortName: mechForm.shortName,
        servicePhone: mechForm.phone,
        contactName: mechForm.contacts,
        address: mechForm.address,
        email: mechForm.email,
        brief: mechForm.shotIntro,
      }),
    })
      .then((res) => {
        if (res.errno === 0) {
          ElMessage.success("提交成功！");
          window.location.reload()
          return false;
        }
        subDisabled.value = false;
      })
      .catch((err) => {
        subDisabled.value = false;
      });
  }
};
</script>

<style lang="less" scoped>
.mech_box {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.mech_center_box {
  width: 1030px;
  // height: 600px;
  height: 500px;
  background-color: #fff;
  margin-top: 80px;
  margin-bottom: 80px;
  display: flex;

  >.mech_left {
    width: 470px;
    position: relative;

    >img {
      position: absolute;
    }

    .bg {
      left: -20px;
      top: -70px;
    }

    .lg {
      left: 10px;
      top: 175px;
      z-index: 999;
    }

    >.title {
      position: relative;
      font-size: 34px;
      font-weight: bold;
      color: #fff;
    }
  }
}

.mech_left {
  width: 450px;
}

.mech_right {
  width: 560px;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-form) {
  margin-top: 32px;
}

:deep(.el-form-item__label) {
  font-size: 16px;
  width: 100px;
}

:deep(.el-input) {
  width: 320px;
}

.text {
  width: 18px;
  width: 100%;
}
</style>
